<!DOCTYPE html>
{% extends "base_login.html" %}

{% block title %}登录{% endblock %}

{% block li %}
    <li class="layui-nav-item">
        <a href="{{ url_for("views.register") }}">注册</a>
    </li>
{% endblock %}

{% block content %}
    <div class="layui-body" style="padding: 15px">
        <form class="layui-form layui-form-pane1" lay-filter="first">
            <div class="layui-form-item">
                <label class="layui-form-label">邮箱</label>
                <div class="layui-input-inline" style="width: 50%">
                    <input type="text" name="Mail" lay-verify="required" lay-reqText="邮箱不能为空" required placeholder="请输入邮箱" autocomplete="off" class="layui-input" >
                </div>
                <div class="layui-form-mid layui-word-aux" style="color: #FF5722">*</div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">密码</label>
                <div class="layui-input-inline" style="width: 50%">
                    <input type="Password" name="Password" lay-verify="required" placeholder="请输入密码" autocomplete="off" class="layui-input">
                </div>
                <div class="layui-form-mid layui-word-aux" style="color: #FF5722">*</div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">验证码</label>
                <div class="layui-input-inline" style="width: 25%">
                    <input type="text" name="verifiyCode" id="verifiyCode" lay-verify="required" placeholder="请输入验证码" autocomplete="off" class="layui-input">
                </div>
                <canvas id="canvas" width="100" height="43" ></canvas>
            </div>
            <div class="layui-form-item">
                <div class="layui-input-block">
                    <button class="layui-btn" lay-submit type="button">登录</button>
                </div>
            </div>
        </form>
    </div>
{% endblock %}

{% block script %}
<script>
   !function(){
        var form = layui.form,
            layer = layui.layer,
            $ = layui.jquery

        var show_num = [];
        //监听提交
        form.on('submit', function(data){
            form_data = data.field;
            var val = form_data.verifiyCode.toLowerCase();
            var num = show_num.join("");

            if(val===''){
                layer.msg('请输入验证码！');
            }else if(val === num){
                $("#verifiyCode").val('');
                draw(show_num);
                $.ajax({
                    url:"{{ url_for("main_api.login") }}",
                    type:"POST",   //请求类型 ,
                    async:false,
                    data: form_data,
                    success:function (res) {
                        if(res.code === "200"){
                            alert("登录成功！");
                            var next_url = GetQueryString('next')
                            if(next_url === null){
                                next_url = "{{ url_for('views.index') }}"
                            }
                            location.href = next_url
                            return false
                        }
                        else{
                            alert(res.msg)
                        }
                    },
                    error:function f(res) {
                        alert("请求失败！状态码：" + res.status)
                    }
                })
            }else{
                alert('验证码错误！请重新输入！');
                $("#verifiyCode").val('');
                draw(show_num);
            }
            return false
        });

        $(function (){
            show_num = [];
            draw(show_num);

            $("#canvas").on('click',function(){
                draw(show_num);
            })

        });

        function draw(show_num) {
            var canvas_width=$("#canvas").width();
            var canvas_height=$("#canvas").height();
            var canvas = document.getElementById("canvas");//获取到canvas的对象，演员
            var context = canvas.getContext("2d");//获取到canvas画图的环境，演员表演的舞台
            canvas.width = canvas_width;
            canvas.height = canvas_height;
            var sCode = "A,B,C,E,F,G,H,J,K,L,M,N,P,Q,R,S,T,W,X,Y,Z,1,2,3,4,5,6,7,8,9,0";
            var aCode = sCode.split(",");
            var aLength = aCode.length;//获取到数组的长度

            for (var i = 0; i <= 3; i++) {
                var j = Math.floor(Math.random() * aLength);//获取到随机的索引值
                var deg = Math.random() * 30 * Math.PI / 180;//产生0~30之间的随机弧度
                var txt = aCode[j];//得到随机的一个内容
                show_num[i] = txt.toLowerCase();
                var x = 10 + i * 20;//文字在canvas上的x坐标
                var y = 20 + Math.random() * 8;//文字在canvas上的y坐标
                context.font = "bold 23px 微软雅黑";

                context.translate(x, y);
                context.rotate(deg);

                context.fillStyle = randomColor();
                context.fillText(txt, 0, 0);

                context.rotate(-deg);
                context.translate(-x, -y);
            }
            for (var i = 0; i <= 5; i++) { //验证码上显示线条
                context.strokeStyle = randomColor();
                context.beginPath();
                context.moveTo(Math.random() * canvas_width, Math.random() * canvas_height);
                context.lineTo(Math.random() * canvas_width, Math.random() * canvas_height);
                context.stroke();
            }
            for (var i = 0; i <= 30; i++) { //验证码上显示小点
                context.strokeStyle = randomColor();
                context.beginPath();
                var x = Math.random() * canvas_width;
                var y = Math.random() * canvas_height;
                context.moveTo(x, y);
                context.lineTo(x + 1, y + 1);
                context.stroke();
            }
        }

        function randomColor() {//得到随机的颜色值
            var r = Math.floor(Math.random() * 256);
            var g = Math.floor(Math.random() * 256);
            var b = Math.floor(Math.random() * 256);
            return "rgb(" + r + "," + g + "," + b + ")";
        }

    }();
</script>
{% endblock %}
